<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Document</title>
  <style>
    /* 父路由的高亮 */
    .router-link-active {
      color: orangered;
    }

    /* 子路由的高亮 */
    .router-link-exact-active {
      color: orange;
    }
  </style>
</head>

<body>
  <div id="app">
    <h2>这里的下面是路由哟</h2>
    <button @click="toIndex">index</button>
    <button @click="toHome">home</button>
    <button @click="toAbout">about</button>
    <router-view></router-view>
  </div>
  <!-- 定义路由模板 -->
  <template id="home">
    <div>
      <h3>我是home页</h3>
      {{this.$route.params}}
    </div>
  </template>
  <template id="index">
    <div>
      <h3>我是index页</h3>
      {{this.$route.query}}
      <router-link to="/index/login" tag="button">去登录页</router-link>
      <router-view></router-view>
    </div>
  </template>
  <template id="about">
    <h3>我是about页</h3>
  </template>
  <template id="login">
    <div>
      <h4>我是index下的login页</h4>
    </div>
  </template>
  <template id="notFound">
    <h2 style="color: red;">八嘎，这不是404了吗？</h2>
  </template>
  <!-- 定义路由模板 -->
  <script src="../vue.js"></script>
  <script src="./vue-router.js"></script>
  <script>
    //避免重复点击路由产生的错误，此错误不影响程序的运行
    const originalPush = VueRouter.prototype.push
    VueRouter.prototype.push = function push(location) {
      return originalPush.call(this, location).catch(err => err)
    }
    //定义路由组件
    const index = { template: '#index' }
    const login = { template: '#login' }
    const home = {
      template: '#home',
      data() {
        return {
          msg: '',
        }
      }
    }
    const about = { template: '#about' }
    const NotFound = { template: '#notFound' }
    // 路由规则
    const routes = [
      //路由重定向，进入页面时，访问的是 / ，为根路由，将其重定向为 /index
      {
        path: '/',
        redirect: '/index'
      },
      {
        path: "/index", //表示路由路径
        component: index,  //表示路由路径对应的组件
        //路由嵌套，在父路由规则下通过children属性定义子路由规则
        children: [
          {
            path: '/index',
            redirect: '/index/login'
          },
          {
            //建议定义子路由的路径时带上父路由路径，语义化，路由高亮显示
            path: '/index/login',
            component: login
          }
        ]
      },
      {
        path: '/home',
        name: 'home',
        component: home
      },
      {
        path: '/about',
        component: about
      },
      {
        path: '*',
        component: NotFound
      }]
    //创建路由对象
    const router = new VueRouter({
      routes  //将路由规则添加到路由对象中
    })
    const app = new Vue({
      el: '#app',
      router,  //将路由对象挂载到vue实例上
      methods: {
        print() {
          console.log(this.$route);
          /* 
            $route保存了当前路由的各种信息
            $router 是实例化VueRouter产生的路由对象并挂载到vue实例上
          */
          console.log(this.$router);
        },
        toIndex() {
          /* 
            使用编程式导航，通过VueRouter实例上的push方法实现路由跳转，通过path或者name跳转
            path跳转传参  --> query:{ } 刷新参数不会丢失
            name跳转传参 --> params:{ } 刷新参数会丢失
          */
          this.$router.push({
            path: '/index',
            query: {
              a: 'haha',
              b: 15
            }
          })
        },
        toHome() {
          this.$router.push({
            name: 'home',
            params: {
              a: 'haha',
              b: 15
            }
          })
        },
        toAbout() {
          this.$router.push({
            path: '/about',
          })
        }
      }
    })
  </script>
</body>

</html>